<template>
    <div class="modal">
        <div class="form">
            <div class="select">
                <a-select v-model="product_id">
                    <a-option v-for="item in props.select_list" :value="item.id">{{ item.name }}</a-option>
                </a-select>
            </div>
            <a-button type="primary" @click="add_item"><template #icon><icon-plus /></template>新增</a-button>
        </div>
        <a-table :columns="columns" :data="tableData" :pagination="false">
            <template #Number="{ record }">
                <div>{{ record.number }}</div>
            </template>
            <template #Probability="{ record }">
                <a-input v-model="record.chance" placeholder="请输入藏品概率" class="input-demo" :min="0" :max="100" />
            </template>
            <template #AddNumber="{ record }">
                <a-input-number v-model="record.add_stock" placeholder="请输入添加数量" class="input-demo" :min="0" />
            </template>
            <template #GiveNumber="{ record }">
                <a-input-number v-model="record.give_number" placeholder="请输入给予数量" class="input-demo" :min="0" />
            </template>
            <template #operate="{ record, rowIndex }">
                <a-button type="text" status="danger" @click="delete_item(record, rowIndex)">删除</a-button>
            </template>
        </a-table>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { Message } from "@arco-design/web-vue";
const props = defineProps({
    data: Object,
    select_list: Array
});
const emit = defineEmits(["submit"]);
const columns = reactive([
    {
        title: '藏品名',
        dataIndex: 'product.name',
        align: 'center',
    },
    {
        title: '数量',
        dataIndex: 'number',
        slotName: 'Number',
        align: 'center',
    },
    {
        title: '概率',
        dataIndex: 'chance',
        slotName: 'Probability',
        align: 'center',
        width: 150
    },
    {
        title: '增加数量',
        dataIndex: 'add_stock',
        slotName: 'AddNumber',
        align: 'center',
        width: 150
    },
    {
        title: '给予数量',
        dataIndex: 'give_number',
        slotName: 'GiveNumber',
        align: 'center',
        width: 150
    },
    {
        title: '操作',
        align: 'center',
        slotName: 'operate',
    },
]);
// const tableData = ref([{
//     province: 7,
//     number: 20,
//     chance: 100,
//     add_stock: 10,
//     give_number: 20
// }]);
const tableData = ref([]);
watch(() => props.data, () => {
    tableData.value = props.data;
});

const product_id = ref("");
const add_item = () => {
    if (!product_id.value) return;
    const index = tableData.value.findIndex(item => item.product.id == product_id.value);
    if (index > -1) {
        Message.error("已存在");
        return;
    };
    const dataItem = props.select_list.find(item => item.id == product_id.value);
    tableData.value.push({
        product: {
            name: dataItem.name,
            id: dataItem.id,
        },
        number: "",
        chance: "",
        add_stock: 0,
        give_number: 0
    });
};
const delete_item = (record, index) => tableData.value.splice(index, 1);
const get_data = async () => {
    let income_product_id = [],
        box_chance = [],
        add_stock = [],
        give_number = [];
    tableData.value.forEach(item => {
        income_product_id.push(item.product.id);
        box_chance.push(item.chance)
        add_stock.push(item.add_stock)
        give_number.push(item.give_number)
    });
    let formData = {
        income_product_id,
        box_chance,
        add_stock,
        give_number
    };
    emit("submit", formData);
};
defineExpose({ get_data });
</script>
<style scoped lang="less">
.modal {
    width: 100%;

    .form {
        display: flex;
        padding-bottom: 20px;

        .select {
            width: 300px;
            margin-right: 10px;
        }
    }
}
</style>